<template>
  <div class="illnessDetails">
    <c-navigation :title="'病组'" :navigationShow="detailsShow" @showBack="mainShow">
      <c-time @change="timeChangeHandler" :defaultDate="defaultDate"/>
      <div slot="nav">病组名称: {{illnessData['diseaseName']}}</div>
    </c-navigation>
    <div class="middleBar">
      <a-tabs default-active-key="1" @change="tabsChange">
        <a-tab-pane key="ji" tab="结余">
          <div id="echarts1" class="echartsDiv"></div>
        </a-tab-pane>
        <a-tab-pane key="cj" tab="次均费用" force-render>
          <div id="echarts2" class="echartsDiv"></div>
        </a-tab-pane>
        <a-tab-pane key="bl" tab="病例数" force-render>
          <div id="echarts3" class="echartsDiv"></div>
        </a-tab-pane>
      </a-tabs>
      <ul class="tableUl">
        <li>时间</li>
        <li v-for="item in barXdata">{{ item }}</li>
        <li>总计</li>
      </ul>
      <ul>
        <li>结余</li>
        <li v-for="item in barYdata">{{ item }}</li>
        <li>{{ allYdata }}</li>
      </ul>
    </div>
    <div class="bottomTable">
      <c-tab :tabList="tabList" :selectKey.sync="selectKey">

        <div class="tableDiv">
          <c-tab-pane>
            <a-table class="custom" :columns="columns2" :data-source="surplusData" :rowKey="record=>record['index']"
                     :pagination="false" :scroll="{ y: '30vh' }">
            </a-table>
          </c-tab-pane>

          <c-tab-pane>
            <a-table class="custom" :columns="columns3" :data-source="doctorGroupData" :rowKey="record=>record['index']"
                     :pagination="{total:total,pageSize:pageSize}" @change="tableChange">
            </a-table>
          </c-tab-pane>
        </div>
      </c-tab>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");
import {diseaseDetailStat, diseaseDepnameList, diseaseGroupnameList} from "@/api/illnessSurplus";
import moment from "moment";
import CTab from "@/components/cTab.vue";
import cTabPane from "@/components/cTabPane.vue";

export default {
  name: "illnessDetails",
  components: {
    CTab,
    cTabPane,
  },
  props: {
    illnessData: {
      type: Object,
      default: false
    },
    defaultDate: {
      type: Object,
      default: null
    },
    detailsShow: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      timeParams: null,
      columns2: [
        {title: '科室', dataIndex: 'depName',},
        {title: '结余', dataIndex: 'disFee',},
        {title: '病例数', dataIndex: 'disCount',},
        {title: '次均结余', dataIndex: 'disFeeAvg',},
        {title: '次均费用', dataIndex: 'timeFeeAvg',},
        {title: '次均药品费', dataIndex: 'drugFeeAvg',},
        {title: '次均材料费', dataIndex: 'materialFeeAvg',},
        {title: '药材占比', dataIndex: 'herbPercent',},
      ],
      columns3: [
        {title: '医疗组', dataIndex: 'groupName',},
        {title: '结余', dataIndex: 'disFee',},
        {title: '病例数', dataIndex: 'disCount',},
        {title: '次均结余', dataIndex: 'disFeeAvg',},
        {title: '次均费用', dataIndex: 'timeFeeAvg',},
        {title: '次均药品费', dataIndex: 'drugFeeAvg',},
        {title: '次均材料费', dataIndex: 'materialFeeAvg',},
        {title: '药材占比', dataIndex: 'herbPercent',},
      ],
      tabList: [
        {name: "科室列表", key: 'a'},
        {name: "医疗组列表", key: 'b'}],
      selectKey: "a",
      diseaseCode: null,
      barAllData: [],
      barXdata: [],
      barYdata: [],
      allYdata: null,
      dataType: 'jl',

      surplusData: [],
      doctorGroupData: [],

      total: 1,
      pageNum: null,
      pageSize: 6,
    }
  },
  created() {
    this.diseaseCode = this.illnessData.diseaseCode
  },
  mounted() {

  },
  methods: {
    async getBar() {
      const params = {...this.timeParams, diseaseCode: this.diseaseCode, dataType: this.dataType};
      const res = await diseaseDetailStat(params);
      if (res['data']) {
        this.barAllData = res['data']
        if (this.barAllData != '') {
          console.log(res['data'])
          this.barXdata = this.barAllData.map((item) => {
            return item.dataKey
          })
          this.barYdata = this.barAllData.map((item) => {
            return item.dataValue
          })
          this.allYdata = this.barYdata.reduce((n, m) => n + m)
          this.$nextTick(function () {
            this.echarts(1)
            this.echarts(2)
            this.echarts(3)
          })
        } else {
          this.barXdata = []
          this.barYdata = []
          this.allYdata = 0
          this.$nextTick(function () {
            this.echarts(1)
            this.echarts(2)
            this.echarts(3)
          })
        }
        //this.doctorGroupPieData=res['data']['data']
      }
    },
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getBar()
      this.getDepnameList()
      this.getGroupList()
    },
    tabsChange(e) {
      this.dataType = e
      this.getBar()
    },
    async getDepnameList() {
      const params = {...this.timeParams, diseaseCode: this.diseaseCode, pageSize: 1000, pageNum: 1};
      const res = await diseaseDepnameList(params);
      if (res['data']) {
        console.log(res['data'])
        this.surplusData = res['data']
        //this.doctorGroupPieData=res['data']['data']
      }
    },
    async getGroupList() {
      const params = {
        ...this.timeParams,
        diseaseCode: this.diseaseCode,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      const res = await diseaseGroupnameList(params);
      if (res['data']) {
        console.log(res['data'])
        this.total = (res['data'].length + 1) * this.pageNum * this.pageSize
        this.doctorGroupData = res['data']
        //this.doctorGroupPieData=res['data']['data']
      }
    },
    tableChange(e) {
      this.pageNum = e
      this.getGroupList()
    },
    mainShow(e) {
      this.$emit('noDetails', e)
    },
    echarts(e) {
      var myChart = echarts.init(document.getElementById('echarts' + e))
      myChart.setOption({
        color: ['#5467E6'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '16%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.barXdata,
            axisLine: {
              color: '#BBC1E3',
              show: false
            },
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '元',
            nameTextStyle: {
              fontSize: 10,
              padding: [0, 0, -2, -24]
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            }
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            markArea: { //标记区域
              data: [
                [{
                  // name: '事件执行时段',
                  itemStyle: {
                    color: '#F5F7F9'
                  }, //颜色设置

                }, {}]
              ]
            },
            markLine: {
              symbol: 'none',
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  lineStyle: {
                    type: 'solid',
                    color: '#C2C4D6',
                    width: 1,
                  }
                },
              },
              data: [
                {
                  yAxis: 0
                }
              ]
            },
            barWidth: 45,
            data: this.barYdata
          }
        ]
      }, true)
    },
  }
}
</script>

<style scoped lang="stylus">
.middleBar {
  height: 350px;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px 30px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0 4px 8px 0 rgba(14, 27, 110, 0.15), 0 2px 4px 0 rgba(14, 24, 101, 0.20);
  border-radius: 12px;
}

.echartsDiv {
  width: 100%;
  height: 170px;
}

.tableDiv {
  width: 100%;
  display: flex;
  background: #FFFFFF;
}

.middleBar ul {
  width: 100%;
  display: flex;
  background: #FCFCFF;
  line-height: 32px;
}

.middleBar .tableUl {
  background: #EBF1FF;
}

.middleBar ul li {
  flex: 1;
  text-align: center
  font-size 12px
}

>>> .c-tab .content {
  border-radius: 12px;
  border-top-left-radius: 0;
}
</style>
